<template>
  <div>
    <div class="myPriority p-rl">
      <el-slider v-model="priority" :max="maxNumber" :min="minNumber"></el-slider>
      <div class="input-number">
        <div class="priorityItem" @click="changePri(1)">1</div>
        <div class="priorityItem" @click="changePri(2)">2</div>
        <div class="priorityItem" @click="changePri(3)">3</div>
        <div class="priorityItem" @click="changePri(4)">4</div>
        <div class="priorityItem" @click="changePri(5)">5</div>
        <div class="priorityItem" @click="changePri(6)">6</div>
        <div class="priorityItem" @click="changePri(7)">7</div>
        <div class="priorityItem" @click="changePri(8)">8</div>
        <div class="priorityItem" @click="changePri(9)">9</div>
        <div class="priorityItem" style="border-right: 0;" @click="changePri(10)">10</div>
      </div>
      <!--<div style="position: absolute;width: 10%;left: 0;top: 0;height: 100%;">1</div>-->
      <div class="input-number white" :style="{'width':whiteWidth}">
        <div style="width: 100%;display: flex;">
          <div class="priorityItem" @click="changePri(item)" v-for="(item,index) in list" :key="'priority'+index">{{item}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      initIndex:{
        default:0,
      },
      initPriority: {
        default: 6,
      },
    },
    data() {
      return {
        priority: 0,
        minNumber:0,
        maxNumber:10,
        selectList:[1,2,3,4,5,6,7,8,9,10],
        list:[],
      }
    },
    computed:{
      whiteWidth: {
        get() {
          return ((this.priority) / 10 )*100 + "%";
        },
        set() {
        }
      },
    },
    watch: {
      initPriority(newVal, oldVal) {
        this.priority = Number(newVal);
      },
      priority(newVal,oldVal){
        if(newVal==0){
          this.whiteWidth="0%";
          this.priority=1;
          this.whiteWidth="10%";
          return;
        }
        let data={
          index:this.initIndex,
          value:newVal,
        };
        this.$emit('getPriority',data);
        this.list=this.selectList.slice(0,newVal);
      },
    },
    created(){
      this.priority=this.initPriority;
    },
    methods:{
      changePri(value){
        if(value==0){
          return;
        }
        this.priority=parseInt(value);
      },
    },
  }
</script>

<style scoped lang="less" type="text/less">
  .myPriority{
    width: 100%;
    .priorityItem{
      border-right: 1px solid #ddd;
      cursor: pointer;
      user-select: none;
    }
    .el-slider__bar {
      height: 23px;
    }

    .el-slider__button-wrapper {
      height: 29px;
      width: 14px;
      top: -4px;
    }

    .el-slider__button-wrapper {
      background: #4C87C5;
      .el-slider__button {
        //display: none;
        width: 0;
        height: 0;
        border: 0;
      }
    }
    .el-input-number.is-controls-right .el-input__inner {
      padding-left: 2px;
      padding-right: 40px;
    }
    .el-slider__button-wrapper:before{
      display: inline-block;
      content: "";
      width: 2px;
      height: 10px;
      margin: 8px 0;
      background: #386DA2;
      position: absolute;
      top: 2px;
      left: 4px;
    }
    .el-slider__button-wrapper:after{
      display: inline-block;
      content: "";
      width: 2px;
      height: 10px;
      margin: 8px 0;
      background: #386DA2;
      margin-left: 2px;
      margin-top: -11px;
      position: absolute;
      top: 21px;
      right: 4px;
    }
  }
  .input-number {
    position: absolute;
    width: 100%;
    left: 0%;
    z-index: 333;
    top: 6px;
    display: flex;
    overflow: hidden;
    border: 1px solid #ddd;
    div {
      flex: 1;
      height: 28px;
      line-height: 30px;
      text-align: center;
      color: #000;
    }
  }

  .white {
    z-index: 555;
    color: #fff;
    border: 0;
    div {
      color: #fff;
    }
    .priorityItem{
      border-right: 1px solid #5194DA;
    }
  }

</style>
